<template>
  <div class="container">
    <!--<img src="@/assets/images/login/v2_qhfagq.jpg" alt="" class="img-bg">-->
    <img src="@/assets/images/login/ht_img_bg@2x.jpg" alt="" class="img-bg" />
    <div class="login-ct">
      <div class="login">
        <div class="login-content">
          <div class="login-form">
            <div class="login-title">欢迎登录住保保管理后台</div>
            <img src="@/assets/images/login/logo.png" alt="" class="img-logo" />
            <el-form
              ref="form"
              :model="list"
              :rules="rules"
              class="form"
              label-position="left"
              @keyup.enter.native="handleLogin"
            >
              <el-form-item prop="username">
                <el-input
                  ref="username"
                  v-model="list.username"
                  placeholder="用户名"
                  name="username"
                  type="text"
                  tabindex="1"
                  auto-complete="on"
                  @keyup.enter.native="handleLogin"
                />
              </el-form-item>
              <el-form-item class="last-item" prop="password">
                <div class="img-input">
                  <el-input
                    :key="passwordType"
                    ref="password"
                    v-model="list.password"
                    :type="passwordType"
                    placeholder="请输入密码"
                    name="password"
                    tabindex="2"
                    auto-complete="on"
                    max-length="25"
                  />
                  <el-input
                    v-show="false"
                    v-model="list.type"
                    name="type"
                    type="hidden"
                    value="1"
                  />
                  <img
                    :src="passwordType == 'password' ? imgUrl : imgUrl2"
                    class="img-passwordType"
                    @click="showPass"
                  />
                </div>
              </el-form-item>
              <div>
                <div class="login-button">
                  <!-- <span class="forget-ct" @click="handleForget">忘记密码?</span> -->
                  <span class="btns">
                    <el-button
                      v-loading="loading"
                      class="btn login-btn"
                      @click.native.prevent="handleLogin"
                      >登录</el-button
                    >
                  </span>
                </div>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="bah-btn">
      <span @click="btnOpen">备案号"沪ICP备2023028307号-1"</span>
    </div> -->
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'
import imgUrl from '@/assets/images/login/icon_browse@2x.png'
import imgUrl2 from '@/assets/images/login/icon_hide@2x.png'
var CryptoJS = require('crypto-js') // encryption
export default {
  name: 'login',
  data() {
    return {
      imgUrl,
      imgUrl2,
      list: {
        height: document.documentElement.clientHeight + 'px',
        username: '',
        password: '',
        type: '1',
        fromType: 'PC'
      },
      rules:this.rules,
      loading: false,
      passwordType: 'password',
      redirect: undefined,
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true,
    },
  },
  created() {
    if (process.env.VUE_APP_BASE_API === '/api') {
      this.list.username = 'admin'
      this.list.password = '123456'
    }
  },
  methods: {
    btnOpen() {
      window.open('https://beian.miit.gov.cn/')
    },
    // 密码的隐藏和显示
    showPass() {
      // 点击图标是密码隐藏或显示
      if (this.passwordType == 'text') {
        this.passwordType = 'password'
      } else {
        this.passwordType = 'text'
      }
    },
    /* 登录 */
    handleLogin(list) {
      if (this.loading) {
        return
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          // md5加密密码
          let data = JSON.parse(JSON.stringify(this.list))
          let key = 'f218b81c0528bf69781ff8a7d6729171'
          data.password = CryptoJS.MD5(key + data.password + key).toString(
            CryptoJS.enc.Hex
          )
          this.$store
            .dispatch('user/login', data)
            .then(res => {
              this.$router.push({ path: '/' })
              this.loading = false
            })
            .catch(() => {
              console.log('erro')
              this.loading = false
              /* 测试用——直接跳转 */
              // this.$router.push({ path: '/' })
            })
        } else {
          this.$message({
            message: '提交失败，请完善必填项',
            type: 'error',
            duration: 3000,
          })
          this.$router.push({ path: '/' })
          return false
        }
      })

      // this.$router.push({ path: '/' })
    },
  },
}
</script>
<style lang="scss" scoped>
.bah-btn {
  position: fixed;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

.bah-btn span {
  color: #409eff;
  cursor: pointer;
  font-size: 12px;
}
.img-input {
  position: relative;
}
.img-passwordType {
  position: absolute;
  right: 5px;
  top: 6px;
  z-index: 999;
  height: 33px;
  padding: 10px;
  cursor: pointer;
}
.img-bg {
  position: fixed;
  height: 64.81vh;
  width: 100vw;
  object-fit: cover;
  z-index: -1;
}
.container {
  width: 100%;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
  font-family: Microsoft YaHei;
  background: rgba(255, 246, 242, 1);
}
.login {
  display: flex;
}
.login-ct {
  position: fixed;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
}
.login-content {
  width:  500px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0px 6px 30px rgba(42, 42, 42, 0.16);
  opacity: 1;
}
.login-title {
  font-weight: 600;
  font-size: 24px;
  color: #333333;
  margin-bottom: 40px;
  text-align: center;
}
.login-form {
  padding: 50px 50px 70px 50px;
  position: relative;
}
.img-logo{
  position: absolute;
  width: 160px;
  height: 160px;
  left: 50%;
  margin-left: -80px;
  top: -190px;
}
.login-form {
  /deep/ .el-input__inner,
  /deep/ .el-input__inner:focus {
    border: 1px solid #e7e7e7;
  }
  input::-webkit-input-placeholder {
    color: #e7e7e7;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #e7e7e7;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #e7e7e7;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #e7e7e7;
  }
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.title-logo {
  max-width: 80%;
  margin: 30px 0;
}
.title-text {
  margin: 27px 0 45px 0;
  font-size: 25px;
  color: #fff;
  font-weight: 400;
}
.form .el-form-item {
  position: relative;
  margin-bottom: 30px;
}
.form >>> .el-input input {
  height: 45px;
  line-height: 45px;
  background: transparent;
  font-size: 15px;
}
.form .icon {
  position: absolute;
  left: 11px;
  top: 11px;
  width: 29px;
  height: 29px;
  z-index: 999;
}
.forget-ct {
  display: block;
  text-align: right;
  cursor: pointer;
  line-height: 30px;
  color: #999;
  font-size: 14px;
  margin-bottom: 30px;
}
.forget-ct:hover {
  color: rgba(246, 119, 59, 1);
}
.icon-psd {
  width: 18px;
  height: 18px;
  margin-right: 4px;
}
.btns {
  position: relative;
  display: block;
  height: 45px;
  left: 50%;
  transform: translateX(-50%);
}
.btn {
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 4px;
  font-size: 20px;
  border: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  color: #fff;
}
.login-btn {
  background: #007E41;
  margin-top: 30px;
}
@media screen and (max-width: 1400px) {
  .bg {
    width: 50%;
  }
}
</style>
